{% load i18n %}
{% load staticfiles %}
{% load endless %}
{% csrf_token %}
{% include 'django_facebook/_facebook_js.html' %}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<link rel="stylesheet" type="text/css" href="{% static 'contents/styles/bootstrap.min.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'contents/styles/style.css' %}">
	<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}django_facebook/css/facebook.css" />

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-cookies.min.js"></script>
	<script src="{{ STATIC_URL }}contents/js/ui-bootstrap-tpls-0.11.2.min.js"></script>
</head>
<body>
	<script>
		var myApp = angular.module('myApp', ['ngRoute', 'ngCookies', 'ui.bootstrap']).
			config(['$httpProvider', '$interpolateProvider', function($httpProvider, $interpolateProvider) {
				$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
				$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
				$httpProvider.defaults.xsrfCookieName = 'csrftoken';
            	$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
			}]).run(['$http', '$cookies', function($http, $cookies) {
				$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
			}]
		);

		myApp.controller("voteCommentsController", function($scope, $http) {

			$scope.upVoteClick = function (content_id, user) {
				$http.post('/rate_content_ajax/', {"content_id": content_id, "user_id": {{ user.facebook_id }}, "calification": "1"}).success(function(response) {
					alert(JSON.stringify(response))
					if (response.errno == 0) {
						document.getElementById("up-vote-" + content_id).className = "badge-item-vote-up up active";
						document.getElementById("down-vote-" + content_id).className = "badge-item-vote-down down";
					}
				});
			};

			$scope.downVoteClick = function (content_id, user) {
				$http.post('/rate_content_ajax/', {"content_id": content_id, "user_id": {{ user.facebook_id }}, "calification": "-1"}).success(function(response) {
					alert(JSON.stringify(response))
					if (response.errno == 0) {
						document.getElementById("up-vote-" + content_id).className = "badge-item-vote-up up";
						document.getElementById("down-vote-" + content_id).className = "badge-item-vote-down down active";
					}
				});
			};
		});

		myApp.controller('LogModalController', function ($scope, $modal, $log) {

			$scope.items = ''

			$scope.open = function () {

				var modalInstance = $modal.open({
					templateUrl: 'login_modal',
					controller: 'LogModalInstanceController',
					resolve: {
						items: function () {
							return $scope.items;
						}
					}
				});

				modalInstance.result.then(function (selectedItem) {
					$scope.selected = selectedItem;
					}, function () {
						$log.info('Modal dismissed at: ' + new Date());
					});
			};
		});

		// Please note that $modalInstance represents a modal window (instance) dependency.
		// It is not the same as the $modal service used above.

		myApp.controller('LogModalInstanceController', function ($scope, $modalInstance) {

			$scope.ok = function () {
				$modalInstance.close();
			};

			$scope.cancel = function () {
				$modalInstance.dismiss('cancel');
			};
		});
	</script>

	<!-- Top Header -->
    <header id="top-nav" class="badge-sticky-nav nav-wrap">
        <div class="nav-wrap">

            <div class="headbar-items" ng-controller="LogModalController">
	            <ul>
		            <li><a class="{% if bests_contents %}selected{% endif %}" href="/"><span class="label">{% trans "Bests Contents" %}</span></a></li>
		            <li><a class="{% if all_contents %}selected{% endif %}" href="/all/"><span class="label">{% trans "All Content" %}</span></a></li>
		            <li>
		            	{% if not user.is_authenticated %}
		            		<div>
			            		<button class="header-btn-centered btn btn-primary btn-large" ng-click="open()">{% trans "Log in" %}</button> 
			            	</div>
			            {% endif %}
		            </li>
	            </ul>
            </div>
        </div>
    </header>

    <!-- Second Header -->
	<div class="section-nav">
		<div class="width-limit">
			<div class="slogan">
				<p>{% trans "Sloggan" %}</p>
			</div>
		</div>
	</div>      

	<!-- Articles -->
	<div id="container">
        <div class="page">
        <div class="main-wrap">
			<section id="list-view-2" class="badge-list-view-element variant-right">

				<div class="badge-entry-collection">

					{% include page_template %}

					{% block js %}
						<script src="http://code.jquery.com/jquery-latest.js"></script>
						<script src="{{ STATIC_URL }}endless_pagination/js/endless-pagination.js"></script>
						<script>
							$.endlessPaginate({
								paginateOnScroll: true,
								paginateOnScrollMargin: 2000
							});
						</script>
					{% endblock %}

				</div>
			</section>
		</div>

		<section id="sidebar">
			<div id="sidebar-content">
				<img src="{% static 'contents/adsPics/300x1050.jpg' %}"/>
			</div>
		</section>

		</div>
	</div>        
</body>
</html>